<template>
    <div
        class="mask"
    >
        <div
            class="dialog"
            ref="dialogEl"
            :style="{
                width: width + 'px',
                marginLeft: -width / 2 + 'px',
                marginTop: -dialogH / 2 + 'px',
            }"
        >
            <header
                :style="{
                    backgroundColor: themeBgColor,
                    color: themeColor
                }"
            >
                <h1>{{ title }}</h1>
                <a 
                    href="javascript:;"
                    :style="{
                        color: themeColor
                    }"
                >&times;</a>
            </header>
            <article
                class="content"
            >
                <p>{{ content }}</p>
            </article>
            <div
                class="btn-group"
                v-if="showBtns"
            >
                <button
                    class="btn btn-confirm"
                    :style="{
                        backgroundColor: themeBgColor,
                        color: themeColor
                    }"
                    @click="confirm"
                >
                    {{ confirmBtnText }}
                </button>
                <button
                    class="btn btn-cancel"
                    @click="cancel"
                >
                {{ cancelBtnText }}
                </button>
            </div>
        </div>
    </div>
</template>

<script>

import { useDialog } from '../hooks'

export default {
    name: 'mgDialog',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        width: {
            type: Number,
            dafault: 200
        },
        content: {
            type: String,
            default: ''
        },
        themeBgColor: {
            type: String,
            default: '#4fafef'
        },
        themeColor: {
            type: String,
            default: '#fff'
        },
        cancelBtnText: {
            type: String,
            default: '否'
        },
        confirmBtnText: {
            type: String,
            default: '是'
        },
        showBtns: {
            type: Boolean,
            default: true
        },
        top: {
            type: String,
            default: 'center'
        }
    },
    emits: ['confirm', 'cancel'],
    setup(props, context) {

        return useDialog(props, context);
    }
}
</script>

<style lang="scss" scoped>

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(#000, 0.4);
        .dialog {
            position: absolute;
            left: 50%;
            top: 50%;
            background-color: #fff;
            box-shadow: 1px 2px 3px;
            border-radius: 8px;
            overflow: hidden;
            header {
                padding: 0 15px;
                height: 44px;
                box-sizing: border-box;
                h1 {
                    display: inline-block;
                    font-size: 18px;
                    line-height: 44px;
                }
                a {
                    float: right;
                    font-size: 22px;
                    margin-top: 4px;
                }
            }
            .content {
                padding: 15px;
                box-sizing: border-box;
            }
            .btn-group {
                padding: 10px 15px;
                height: 30px;
                border-top: 1px solid #ddd;
                .btn {
                    min-width: 88px;
                    cursor: pointer;
                    height: 30px;
                    font-size: 14px;
                    border-radius: 3px;
                    float: right;
                    
                    &.btn-confirm {
                        margin-left: 10px;
                    }
                    &.btn-cancel {
                        background-color: #ddd;
                        color: #666;
                    }
                }
            }
            h1, p {
                margin: 0;
            }
            a, .btn {
                border:none;
                text-decoration: none;
            }
        }
    }
    
</style>

